<template>
    <!-- 首页1横向柱状图 -->
    <!-- 当日系统任务统计 -->
    <div id="home1" ref="home1" style="width: 100%;height:100%;" />
</template>
<script>
import * as echarts from 'echarts';
import { listInfo ,getTotal} from "@/api/system/info";

export default {
    data(){
        return{
            CameraNum:{
                cameraBrandNum:0,//品牌总数
                cameraNum:0,//可控摄像头总数
                cameraNum:0//摄像头总数
            }
        }
    },
    mounted() {
        let that = this;
        setTimeout(function(){
            that.initTotal();
        },0);
    },
    methods: {
        initTotal(){
            getTotal().then((res)=>{
                if(res.code==200){
                    this.CameraNum=res.data;
                    this.initChart1(); // 数据更新后重新渲染图表
                }
            })
        },
        initChart1() {
            var chartDom = document.getElementById('home1');
            var myChart = echarts.init(chartDom);

            window.addEventListener("resize", () => {
                myChart.resize();
            });
            
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '15%',
                    bottom: '3%',
                    top: '5%',
                    containLabel: true
                },
                yAxis: {
                    type: 'category',
                    data: ['品牌总数', '可控摄像头', '摄像头总数'],
                    axisLabel: {
                        fontSize: 12,
                        color: "#fff",
                        fontWeight: 'bold',
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    max: function(value) {
                        return value.max * 1.2;
                    }
                },
                series: [{
                    data: [
                        this.CameraNum.cameraBrandNum,
                        this.CameraNum.cameraNum,
                        this.CameraNum.cameraNum
                    ],
                    type: 'bar',
                    barWidth: '40%',
                    itemStyle: {
                        color: '#4a90e2'
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}个',
                        color: "#fff",
                        fontSize: 17,
                        padding: [0, 0, 0, 10]
                    }
                }]
            };

            myChart.setOption(option);
        }
    }
};
</script>
